<template>
	<view>
		<view class="wrap">
			<text class="text-pass">收藏数：{{favoratesCount}}</text>

			<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
				<view class="page-box">
<!-- 
					<view v-for="(item, index) in orderList[0]" :key="index" :data-index="index" class="order-item"
						@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd"
						:style="'right:'+item.right+'rpx'">
						<view class="content">列表展示内容</view>
						<view class="remove" @click="delData(item)">注 销</view>
						<view class="edit" @click="editData(item)">编 辑</view>
					</view>

 -->

					<!-- 
					<v-touch v-for="(item, index) in orderList[0]" :key="index"
						:class="{item:true, move:candelete.id==item.id}" @swipeleft="swipeLeft" @swiperight="swipeRight"
						:swipe-options="{direction: 'horizontal'}">
						<view class='txt-name' @click="clkItem(item, index)">
							<text>{{item.title}}</text>
						</view>

					</v-touch> -->

					
					<li v-for="(item, index) in orderList[0]" :key="index" :class="{item:true, move:candelete.id==item.id}"
						@touchstart="touchStart(item)" @touchend="touchEnd(item)">
						<view class='txt-name' @click="clkItem(item, index)">
							<text>{{item.title}}</text>
						</view>
						<image @click="" class="img-del"
							src="../../../../static/img/ic_del.png"></image>
					</li>

					<!-- <view class="item" v-for="(item, index) in orderList[0]" :key="index" :class="{move:candelete.id==item.id}"
						@touchstart="touchStart(item)" @touchend="touchEnd(item)">
						<view class='txt-name' @click="clkItem(item, index)">
							<text>{{item.title}}</text>
						</view>

						<div class="del" @click="clkDelFavoritesFolder(item, index)">删除</div>
					</view> -->


					<u-loadmore :status="loadStatus[0]" bgColor="#ffffff"></u-loadmore>
				</view>

			</scroll-view>

		</view>
		<u-modal @confirm="confirmDelFolder(selectedIndex)" :show-title=false :showCancelButton=true
			v-model="showDelDialog" :content="delMsg"></u-modal>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				clientNum: {}, // 记录开始滑动（x1）,结束滑动（x2）的鼠标指针的位置
				candelete: {}, // 滑动的item

				dataId: -1,
				delMsg: '是否将该帖子从收藏夹中移除？',
				showDelDialog: false,
				selectedIndex: -1,
				favoratesCount: 1,
				orderList: [
					[],
				],
				dataList: [{
						goodsUrl: '//img13.360buyimg.com/n7/jfs/t1/103005/7/17719/314825/5e8c19faEb7eed50d/5b81ae4b2f7f3bb7.jpg',
						title: '陆小凤',
						type: '灰色;M',
						deliveryTime: '付款后30天内发货',
						price: '348.58',
						selected: false,
						right: 0,
						number: 2
					},
					{
						goodsUrl: '//img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg',
						title: '【葡萄藤】日系甜美风原创jk制服女2020新款',
						type: '45cm;S',
						deliveryTime: '付款后30天内发货',
						price: '135.00',
						selected: true,
						right: 0,
						number: 1
					},
					{
						goodsUrl: '//img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg',
						title: '三星（SAMSUNG）R 京东微联 智能语音 教育能语音 教育资源液晶电视机',
						type: '4K，广色域',
						deliveryTime: '保质5年',
						price: '1998',
						selected: true,
						right: 0,
						number: 3
					}
				],
				dx: 0,
				loadStatus: ['loadmore'],
			};
		},
		onLoad(option) {
			this.getOrderList(0);
			this.dataId = option.id;
			console.log(option.id); //打印出上个页面传递的参数。
		},
		computed: {},
		methods: {
			swipeLeft: function() {
				console.log("swipeLeft");
			},
			swipeRight: function() {
				console.log("swipeRight");
			},
			clkItem(item, index) {
				uni.navigateTo({
					url: '../detailList/detailList' // todo post detail page
				})
			},
			confirmDelFolder(index) {
				console.log(index);
				this.orderList[0].splice(index, 1)
			},
			clkDelFavoritesFolder: function(item, index) {
				this.selectedIndex = index;
				console.log(index + "  " + item.title);
				this.showDelDialog = true;
			},
			reachBottom() {
				// 此tab为空数据
				this.loadStatus.splice(0, 1, "loading")
				setTimeout(() => {
					this.getOrderList(0);
				}, 1200);
			},
			// 页面数据
			getOrderList(idx) {
				for (let i = 0; i < 7; i++) {
					let index = this.$u.random(0, this.dataList.length - 1);
					let data = JSON.parse(JSON.stringify(this.dataList[index]));
					data.id = this.$u.guid();
					this.orderList[idx].push(data);
				}
				this.loadStatus.splice(0, 1, "loadmore")
			},
			clkSubmit: function() {},

			/**
			 * 删除item
			 * index是下标
			 */
			deleteItem(index) {
				this.list.splice(index, 1)
				// splice方法是删除数组某条数据，或者向某个位置添加数据
			},
			touchStart(item) {
				let touchs = event.changedTouches[0];
				// 记录开始滑动的鼠标位置
				this.clientNum.x1 = touchs.pageX;
				this.candelete = {};
			},
			touchEnd(item) {
				let touchs = event.changedTouches[0];
				// 记录结束滑动的鼠标位置
				this.clientNum.x2 = touchs.pageX;
				this.candelete = {};
				// 判断滑动距离大于50，判定为滑动成功，否则失败
				if (
					this.clientNum.x2 < this.clientNum.x1 &&
					Math.abs(this.clientNum.x1) - Math.abs(this.clientNum.x2) > 50
				) {
					event.preventDefault();
					this.candelete = item;
				} else if (
					this.clientNum.x2 > this.clientNum.x1 &&
					Math.abs(this.clientNum.x2) - Math.abs(this.clientNum.x1) > 10
				) {
					event.preventDefault();
					this.candelete = {};
				}
			},


			//开始触摸滑动
			drawStart(e) {
				console.log("开始触发");
				var touch = e.touches[0];
				this.startX = touch.clientX;
			},
			//触摸滑动
			drawMove(e) {
				console.log("滑动");
				for (var index in this.orderList[0]) {
					this.$set(this.orderList[0][index], 'right', 0);
				}
				var touch = e.touches[0];
				var item = this.orderList[0][e.currentTarget.dataset.index];
				var disX = this.startX - touch.clientX;
				if (disX >= 20) {
					if (disX > this.delBtnWidth) {
						disX = this.delBtnWidth;
					}
					this.$set(this.orderList[0][e.currentTarget.dataset.index], 'right', disX);
				} else {
					this.$set(this.orderList[0][e.currentTarget.dataset.index], 'right', 0);
				}
			},
			//触摸滑动结束
			drawEnd(e) {
				console.log("滑动结束");
				var item = this.orderList[0][e.currentTarget.dataset.index];
				if (item.right >= this.delBtnWidth / 2) {
					this.$set(this.orderList[0][e.currentTarget.dataset.index], 'right', this.delBtnWidth);
				} else {
					this.$set(this.orderList[0][e.currentTarget.dataset.index], 'right', 0);
				}
			},
		},


	};
</script>
<style lang="scss" scoped>
	.page-box {
		margin-top: 33rpx;
	}

	li {
		background: #fdfdfd;
		border-bottom: 1px solid #e1e1e1;
		line-height: 40px;
		position: relative;
		transform: translateX(0);
		transition: all .3s;
		/*滑动效果更生动*/
		padding-left: 10px;
	}

	ul {
		overflow-x: hidden;
		/*隐藏ul x轴的滚动条*/
	}

	li.move {
		transform: translateX(-60rpx);
		/*滑动后x轴位移-60px,使其可见*/
	}

	.del {
		position: absolute;
		top: 0;
		right: -1px;
		z-index: 3;
		width: 60px;
		height: 100%;
		text-align: center;
		color: #fff;
		background-color: #ff5b45;
		transform: translateX(60rpx);
		/*默认x轴位移60px，使其隐藏*/
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;

		.text-pass {
			font-size: 38rpx;
			font-family: SimHei;
			font-weight: 400;
			line-height: 52rpx;
			color: #4D5B80;
			opacity: 1;

			align-self: flex-start;
			margin-top: 23rpx;
			margin-left: 29rpx;

			border-bottom: 2rpx solid #4D5B80;
			opacity: 1;
		}

		.item {
			display: flex;
			flex-flow: row nowrap;
			justify-content: center;
			margin: 0 29rpx;
			padding: 23rpx 0;

			border-bottom: 2rpx solid #BFBFBF;

			.txt-name {
				flex-grow: 1;
				font-size: 38rpx;
				font-family: SimHei;
				font-weight: 400;
				line-height: 52rpx;
				color: #4D5B80;
				opacity: 1;

				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}


			.img-edit {
				width: 40rpx;
				flex-shrink: 0;
				height: 40rpx;
				margin-right: 31rpx;
				margin-left: 20rpx;
			}

			.img-del {
				width: 39rpx;
				flex-shrink: 0;
				height: 41rpx;
			}
		}

		.item:last-child {
			border-bottom: 0px solid #00000000;
		}

		.img-del {
			width: 39rpx;
			flex-shrink: 0;
			height: 41rpx;
		}
	}
</style>
<style>
	.main {
		width: 90%;
		height: auto;
		margin: 10px auto;
		overflow: hidden
	}

	.order-item {
		width: 100%;
		display: flex;
		position: relative;
		margin: 10px auto;
		align-items: right;
		flex-direction: row;
	}

	.content {
		width: 100%;
		height: 100px;
		margin: 0 auto;
		border: 1px solid #C0C0C0;
		line-height: 100px;
		text-align: center;
	}

	.remove {
		margin-left: -5%;
		width: 80px;
		height: 100%;
		background-color: red;
		color: #FFFFFF;
		position: absolute;
		top: 0;
		right: -80px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
	}

	.edit {
		width: 80px;
		height: 100%;
		background-color: green;
		color: white;
		position: absolute;
		top: 0;
		right: -160px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
	}
</style>
